<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="../zxt/zxt.js"></script>
  <script>
    	importZXT("../zxt");
  </script>
	
	<style>
		#textarea1 textarea{ border:0px; }
	</style>
	
</head>

<body class="bodyBackground">

	<div id="regionHub" zxt="zxt.ui.Region" zxt.title="#TITLE#" zxt.state="1">
		<div id="__messager"  zxt="zxt.ui.MessageBar" zxt.msg="#WELCOME#"></div>
	</div>

	<br>

	<hr>

	<table style='width:400px'>
		<tr>
			<td><div id="btnDISABLE" zxt="zxt.ui.Button" zxt.label="disable" zxt.text="DISABLE" zxt.mode="NORMAL"></div></td>
			<td><div id="btnLABEL" zxt="zxt.ui.Button" zxt.label="disable" zxt.text="LABEL" zxt.mode="NORMAL"></div></td>
			<td><div id="btnMASK" zxt="zxt.ui.Button" zxt.label="disable" zxt.text="MASK" zxt.mode="NORMAL"></div></td>
			<td><div id="btnNORMAL" zxt="zxt.ui.Button" zxt.label="enable" zxt.text="NORMAL" zxt.mode="NORMAL"></div></td>
			<td><div id="btnLock" zxt="zxt.ui.Button" zxt.label="enable" zxt.text="LOCK" zxt.mode="NORMAL"></div></td>			
		</tr>
	</table>

			
	<hr>
	
  <table style="width:100%; table-layout:fixed">
	<tr>
	  	<td width="70%">
	  		<div id="btn0" zxt="zxt.ui.Button" zxt.label="change" zxt.text="改变我" ></div>
	  	</td>
	  	<td width="30%">
	  		
	  	</td>	  	
  	</tr>	
		
	<tr>
	  	<td width="70%">
	  		<div id="label1" zxt="zxt.ui.Label" zxt.value="1" zxt.options="男:1,女:2" zxt.conf="Format:'$LABEL$:$VALUE$'" zxt.labelonly="false"></div>
	  	</td>
	  	<td width="30%">
	  		<div id="btn1" zxt="zxt.ui.Button" zxt.label="labe" zxt.text="标签" zxt.mode="NORMAL"></div>
	  	</td>	  	
  	</tr>
  	
  	<tr>
	  	<td width="70%">
	  		<div id="text1" zxt="zxt.ui.Textbox" zxt.required="true" zxt.regex="^[\d]{11}$" zxt.conf="MaxLength:11"></div>
	  	</td>
	  	<td width="30%">
	  		<div id="btn2" zxt="zxt.ui.Button" zxt.label="textbox" zxt.text="文本框" zxt.mode="NORMAL"></div>
	  	</td>
  	</tr>
  	
  	<tr>
	  	<td width="70%">
	  		<div id="pwd1" zxt="zxt.ui.PasswordBox" zxt.value="ABCDEFGHIJKLMN"></div>
	  	</td>
	  	<td width="30%">
	  		<div id="btn3" zxt="zxt.ui.Button" zxt.label="edit" zxt.text="口令框" zxt.mode="NORMAL"></div>
	  	</td>	  	
  	</tr>
  	
  	<tr>
	  	<td>
	  		<div id="select1" zxt="zxt.ui.Select" zxt.maxHeight="200px" zxt.value="Male" style="" zxt.labelonly="false" zxt.conf="Format:'$LABEL$ -- {$VALUE$}',PadLength:4">
  				<div zxt.option="" zxt.label="ABCDEFGHIJKLMNOPQRSTUVWXYZ" ></div>  				
  				<div zxt.option="1" zxt.label="男"></div>
  				<div zxt.option="2" zxt.label="女"></div>
  				<div zxt.option="3" zxt.label="男"></div>
  				<div zxt.option="4" zxt.label="女"></div>
  				<div zxt.option="5" zxt.label="男"></div>
  				<div zxt.option="6" zxt.label="女"></div>
  				<div zxt.option="7" zxt.label="男"></div>
  				<div zxt.option="8" zxt.label="女"></div>
  				<div zxt.option="9" zxt.label="女"></div>
  				<div zxt.option="10" zxt.label="男"></div>
  			</div>
	  	</td>
	  	<td>
	  		<div id="c1"  zxt="zxt.ui.Columns">  	
  				<div id="btn4" zxt="zxt.ui.Button" zxt.label="edit" zxt.text="下拉框" zxt.mode="NORMAL" style="width:80px"></div>
  				<div id="btn41" zxt="zxt.ui.Button" zxt.label="edit" zxt.text="清空" zxt.mode="NORMAL" style="width:80px"></div>
  				<div id="btn42" zxt="zxt.ui.Button" zxt.label="edit" zxt.text="设置LABEL" zxt.mode="NORMAL" style="width:100px"></div>  	
  			</div>	  		
	  	</td>
  	</tr>
  	
  	<tr>
	  	<td>
	  		<div id="check1" zxt="zxt.ui.Checkbox" zxt.value="0" zxt.check="0" zxt.uncheck="1"></div>	  		  		
	  	</td>	  	
	  	<td>
	  		<div id="btn5" zxt="zxt.ui.Button" zxt.label="forbidden" zxt.text="多选框" zxt.mode="NORMAL"></div>
	  	</td>  	
  	</tr>
  	
  	<tr>
	  	<td width="70%">	  		
	  		<div id="radio1" zxt="zxt.ui.Radiobox" zxt.group="group1" zxt.value="true"></div>
  			<div id="radio2" zxt="zxt.ui.Radiobox" zxt.group="group1" zxt.value="false"></div>
	  	</td>	  	
	  	<td width="30%">
	  	</td>	  	
  	</tr>
  	<tr>
  		<td width="70%">
  			<div id="combobox1" zxt="zxt.ui.Combobox" zxt.labelonly="false" zxt.autoShow="false" zxt.required="true" zxt.chooseonly="true" zxt.value="" zxt.options="b:2,c:3,d:4,e:5,f:6,g:7,h:8,i:9,j:10,k:11,l:12,m:13,n:14" zxt.maxHeight="100px"></div>
  		</td>
  		<td width="30%">
	  	</td>
  	</tr>
  	<tr>
	  	<td width="70%">	  		
	  		<div id="textarea1" zxt="zxt.ui.TextArea" zxt.required="true" zxt.tip="Please input!" zxt.value="" zxt.height="100px""></div>
	  	</td>
	  	<td width="30%">
	  	<div id="btn6" zxt="zxt.ui.Button" zxt.label="textarea" zxt.text="多行文本" zxt.mode="NORMAL"></div>
	  	</td>	  	
  	</tr>
  	<tr>
	  	<td width="70%">	  		
	  		<div id="Prompt1" zxt="zxt.ui.Prompt" zxt.text="这是非常非常长的字符串显示不完整的可以用神奇的控件显示出来" style="width:100px"></div>
	  	</td>
	  	<td width="30%">
	  	</td>	  	
  	</tr>
  	<tr>
  		<td width="70%">
  			<div id="Choose2" zxt="zxt.ui.Choose" zxt.group="group2" zxt.default="Male">
					<div zxt.option="Male" zxt.label="男"></div>
					<div zxt.option="Female" zxt.label="女"></div>
				</div>
  		</td>
  	</tr>
  	<tr>
  		<td width="70%">
  			<div id="datebox1" zxt="zxt.ui.Datebox" zxt.required="true" zxt.format="yyyy mm dd" style="width:100px" zxt.tip="MMDD" zxt.conf="TextAlign:'right'"></div>
  		</td>
  		<td>
  			<div id="btn7" zxt="zxt.ui.Button" zxt.label="datebox" zxt.text="日期框" zxt.mode="NORMAL"></div>
  		</td>
  	</tr>
  	
  </table>	
  

</body>
</html>


<script>
	
	function onInitialize(dw){
		$zxtUI.select1.onValueChange = function(old, now){
			alert("下拉选择框变成" + now);
			return false;
		};
		
		$zxtUI.datebox1.onValueChange = function(old, now){
			alert("日期框变成" + now);
			return true;
		};
	
		$zxtUI.__messager.setMessage("页面初始化... ...");		
	};
	
	function onChildValueChange(target, old, now){
		var msg = "控件"+ target.id() +"{"+ target.getType() +"}设置了新值[" + now + "]" ;
		$zxtUI.__messager.setMessage(msg);	
	};	
	
</script>

<script>  
	
	function configSelect(dSelect){
		dSelect.addOption("男", "Male");
		dSelect.addOption("女", "Female");		
	}
	
	zxt.ui.Combobox.prototype.maxHeight = "200px";
	//$zxt.mode("LABEL");
	$zxt.init();	
	$zxtUI.text1.focus();

	function onClick$btn0(){
		var widget = $zxtUI.btn0;
		alert(widget.text());
		
		widget.text("我改变拉");
		widget.render();
	}

	function onClick$btn1(){		
		alert($zxtUI.label1.getValue());
		$zxtUI.label1.setValue(2);
		$zxtUI.label1.render();
		
	}

	function onClick$btn2(){		
		alert($zxtUI.text1.getValue());
		$zxtUI.text1.setValue(0.0000002);
		$zxtUI.text1.render();
	}

	function onClick$btn5(){
		var widget = $zxtUI.check1;
		alert(widget.getValue());
		
		widget.setValue("1");
		widget.render();
	}
	
	function onClick$btn3(){
		alert($zxtUI.pwd1.getValue());
	}
	
	function onClick$btn4(){		
		alert($zxtUI.select1.getValue());
		$zxtUI.select1.setValue("1");
		$zxtUI.select1.render();
	}
	
	function onClick$btn41(){
		//$zxtUI.select1.options([]);
		
		var opts = $zxtUI.select1.options();		
		opts.push({label:"二", value:"2"});
		$zxtUI.select1.options(opts);
		
		$zxtUI.select1.render();
	}
	
		function onClick$btn40(){
		//$zxtUI.select1.options([]);
		
		var opts = [];
		opts.push({label:"一", value:"1"});
		opts.push({label:"二", value:"2"});
		$zxtUI.select1.options(opts);
		
		$zxtUI.select1.render();
	}
	
	function onClick$btn42(){
		alert($zxtUI.select1.getLabel());
		$zxtUI.select1.setLabel("女");
		$zxtUI.select1.render();
	}

	function onClick$btn6(){
		var widget = $zxtUI.textarea1;
		alert(widget.getValue());
		widget.setValue("ABC");
		widget.render();		
		alert(widget.getValue());
	}
	
	function onClick$btn7(){
		var widget = $zxtUI.datebox1;
		alert(widget.getValue());
		//widget.setValue("ABC");		
		//alert(widget.getValue());
	}
	
	function onClick$btnDISABLE(){
		$zxt.mode("DISABLE");
		$zxt.render();
	}
	
	function onClick$btnLABEL(){
		$zxt.mode("LABEL");
		$zxt.render();
	}

	function onClick$btnMASK(){
		$zxt.mode("MASK");
		$zxt.render();
	}
	
	function onClick$btnNORMAL(){
		$zxt.mode("NORMAL");
		$zxt.render();
	}
	
	function onClick$btnLock(){
		$zxt.lock(5000);
		
	}


</script>


